<template>
  <div class="role-selector">
    <!-- 选项高度严格40px -->
    <div 
      v-for="role in availableRoles"
      :key="role.value"
      class="role-option"
      :class="{ selected: role.value === modelValue }"
      @click="$emit('update:modelValue', role.value)"
    >
      <deepin-icon :name="role.icon" size="16"/>
      <span>{{ role.label }}</span>
    </div>
  </div>
</template>

<script setup>
defineProps({
  modelValue: {
    type: String,
    required: true
  },
  availableRoles: {
    type: Array,
    default: () => [
      { value: 'developer', label: '开发者', icon: 'code' },
      { value: 'reviewer', label: '审核员', icon: 'shield-check' }
    ]
  }
})
</script>

<style scoped>
.role-selector {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}

.role-option {
  height: 40px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.role-option:hover {
  background: #f5f5f5;
}

.selected {
  background-color: #e6f7ff;
  border-left: 3px solid #1890ff;
}
</style>